<template>
  <view class="home">
    <!-- 搜索 -->
    <my-search@click="toSearch">
      </my-search>
      <swiper indicator-dots circular duration="500" interval="2000" autoplay>
        <swiper-item v-for="item in lunboList" :key='item.goods_id'>
          <navigator :url="item.navigator_url" class="img">
            <image :src="item.image_src" mode="aspectFill"></image>
          </navigator>
        </swiper-item>
      </swiper>
      <view class="cate">
        <view class="c-img" v-for="(v, i) in CateListe" :key="i" @click="navTo(v)">
          <image :src="v.image_src" mode="heightFix"></image>
        </view>
      </view>
      <view class="floor-box" v-for="(fItem,fIndex) in floorList" :key="fIndex">
        <image @click=listTo(fItem.floor_title.name) class="f-title" :src="fItem.floor_title.image_src" alt=""> </image>
        <view class="f-bottom">

          <view class="f-left">
            <image @click=listTo(fItem.product_list[0].name) :style="{width:`${fItem.product_list[0].image_width}rpx`}"
              :src="fItem.product_list[0].image_src" mode="widthFix"></image>
          </view>
          <view class="f-right">
            <image @click=listTo(item.name) v-for="(item,index) in fItem.product_list" :key="index" v-if="index"
              :src="item.image_src" mode="widthFix" :style="{width:`${item.image_width}rpx`}"></image>
          </view>
        </view>

      </view>
  </view>
</template>

<script>
  import mixins from '../../mixins/mixins.js'
  export default {
    mixins:[mixins],
    data() {
      return {
        lunboList: [],
        CateListe: [],
        floorList: []
      };
    },

    methods: {
      // 搜索跳转
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      // 楼层跳转去list
      listTo(name) {
        uni.navigateTo({
          url: `/pages/list/list?key=${name}`
        })
      },
      // 获取楼层数据
      async getFloorList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/home/floordata').catch(error => error)
        // 判断请求是否成功
        if (res.meta.status !== 200) return uni.$showMsg()
        // 保存数据
        this.floorList = res.message
        // console.log(this.floorList)
      },
      navTo(v) {
        if (v.name === '分类') {
          uni.switchTab({
            url: '/pages/cate/cate'
          })
        }
      },
      async getLunboList() {
        // 发送网络请求
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/home/swiperdata').catch(error => error)
        // 判断请求是否成功
        if (res.meta.status !== 200) return uni.$showMsg()
        // 保存数据
        this.lunboList = res.message
      },
      async getCateListe() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/home/catitems').catch(error => error)
        // 判断请求是否成功
        if (res.meta.status !== 200) return uni.$showMsg()
        // 保存数据
        this.CateListe = res.message
        // console.log(this.CateListe)
      }
    },
    onLoad() {
      this.getLunboList()
      this.getCateListe()
      this.getFloorList()
    }
  }
</script>

<style lang="scss">
  .home {
    .img {
      height: 330rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .cate {
      height: 200rpx;
      display: flex;
      align-items: center;

      .c-img {
        flex: 25%;
        height: 130rpx;
        text-align: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .floor-box {
      width: 100%;

      .f-title {
        width: 100%;
        height: 40rpx;
      }

      .f-bottom {
        display: flex;
        padding: 14rpx;

        image {
          margin-right: 10rpx;
        }

        .f-right {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
</style>
